<template>
  <div class="wrap">
    <header>
      <h3>审核管理</h3>
    </header>
    <main>
      <div class="shenhe1">
        <div class="tab">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first">
              <div class="chose">
                <v-distpicker></v-distpicker>
                <div class="ipt">
                  <input type="text" v-model="val" placeholder="关键字" />
                  <button @click="search">搜索</button>
                </div>
              </div>
              <div class="list">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column label="序号" prop="id" width="180"></el-table-column>
                  <el-table-column label="小区名称" prop="title" width="180"></el-table-column>
                  <el-table-column label="标题" prop="introduce" width="180"></el-table-column>
                  <el-table-column label="面积/m²" prop="num" width="180"></el-table-column>
                  <el-table-column label="总价" prop="price" width="180"></el-table-column>
                  <el-table-column label="排序" prop="num" width="180"></el-table-column>
                  <el-table-column label="状态" prop="shenhe" width="180"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini" type="danger">审核</el-button>
                      <el-button size="mini" type="danger">编辑</el-button>
                      <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
            </el-tab-pane>
            <el-tab-pane label="审核通过" name="second">
              <div class="chose">
                <v-distpicker></v-distpicker>
                <div class="ipt">
                  <input type="text" v-model="val" placeholder="关键字" />
                  <button @click="search">搜索</button>
                </div>
              </div>
              <div class="list">
                <div class="list">
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column label="序号" prop="id" width="180"></el-table-column>
                    <el-table-column label="小区名称" prop="title" width="180"></el-table-column>
                    <el-table-column label="标题" prop="introduce" width="180"></el-table-column>
                    <el-table-column label="面积/m²" prop="num" width="180"></el-table-column>
                    <el-table-column label="总价" prop="price" width="180"></el-table-column>
                    <el-table-column label="排序" prop="desc" width="180"></el-table-column>
                    <el-table-column label="状态" prop="shenhe" width="180"></el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" type="danger">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
            </el-tab-pane>
            <el-tab-pane label="审核不通过" name="third">
              <div class="chose">
                <v-distpicker></v-distpicker>
                <div class="ipt">
                  <input type="text" v-model="val" placeholder="关键字" />
                  <button @click="search">搜索</button>
                </div>
              </div>
              <div class="list">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column label="序号" prop="id" width="180"></el-table-column>
                  <el-table-column label="小区名称" prop="title" width="180"></el-table-column>
                  <el-table-column label="标题" prop="introduce" width="180"></el-table-column>
                  <el-table-column label="面积/m²" prop="num" width="180"></el-table-column>
                  <el-table-column label="总价" prop="price" width="180"></el-table-column>
                  <el-table-column label="排序" prop="desc" width="180"></el-table-column>
                  <el-table-column label="状态" prop="shenhe" width="180"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import VDistpicker from "v-distpicker";
export default {
  data() {
    return {
      components: { VDistpicker },
      tableData: [],
      activeName: "first",
      value1: "",
      options1: [
        {
          value: "选项1",
          label: "北京"
        },
        {
          value: "选项2",
          label: "安徽"
        },
        {
          value: "选项3",
          label: "杭州"
        }
      ],
      value2: "",
      options2: [
        {
          value: "选项1",
          label: "天津"
        },
        {
          value: "选项2",
          label: "宿迁"
        },
        {
          value: "选项3",
          label: "南桥"
        }
      ],
      value3: "",
      options3: [
        {
          value: "选项1",
          label: "奉献"
        },
        {
          value: "选项2",
          label: "浦东"
        },
        {
          value: "选项3",
          label: "嘉定"
        }
      ],
      val: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await axios.post("/api/search", { val: this.val });
      console.log(res);
      this.tableData = res.data.data;
      // axios({
      //   url: "/api/getList",
      //   method: "post"
      // }).then(res => {
      //   // console.log(res);
      //   this.tableData = res.data.data;
      // });
    },
    search() {
      this.getList();
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    del(id) {
      axios({
        url: "/api/delList",
        method: "post",
        data: { id }
      }).then(res => {
        // console.log(res);
        this.getList();
      });
    }

    // search() {
    //   axios({
    //     url: "/api/search",
    //     method: "post",
    //     data: { val: this.val }
    //   }).then(res => {
    //     console.log(res);
    //     this.tableData = res.data.data;
    //   });
    // }
  }
};
</script>

<style lang='scss' scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // border: 1px solid #999;
}
header {
  height: 30px;
  line-height: 30px;
  color: #999;
}
main {
  .shenhe1 {
    margin-top: 5px;
    .tab {
      .chose {
        display: flex;
        align-items: center;
        margin: 5px 0;
        .ipt {
          display: flex;
          align-items: center;
          margin-left: 20px;
          input {
            border-collapse: collapse;
            width: 160px;
            height: 37px;
            border-radius: 3px;
            background: #fff;
            padding-left: 12px;
          }
          button {
            width: 80px;
            height: 37px;
            border: none;
            background: #999;
            font-size: 16px;
            border-radius: 3px;
            margin-left: 8px;
          }
        }
      }
      .list {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 15px;
        tr {
          border: 1px solid #ccc;
          line-height: 20px;
          text-align: center;
          align-items: center;
          th {
            line-height: 40px;
            padding: 0 78px;
          }
          td {
            line-height: 35px;
            padding: 0 15px;
          }
        }
      }
    }
  }
}
</style>